@import 'mixins';
@import 'variables';
@import 'djangocms/list';

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.bs-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("../bootstrap/img/glyphicons-halflings.png");
  background-position: 0 -96px;
  //    text-indent: -9999px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  opacity: .6;
  margin: 0;

  &:hover {
    opacity: 1;
  }
}

.delete-translation {
  margin-top: 7px;
  display: inline-block;
}

.confirm-delete {
  padding-right: 15px;

  .btn-info {
    margin-left: 20px;
  }
}

.datetime {
  display: inline-block;
}

/* Fieldset */
body.cms-page {
  .form-horizontal {
    .control-label {
      width: 140px;
    }

    .controls {
      margin-left: 160px;
    }

    fieldset.plugin-holder {
      display: block;
      background: @bgcolor;
      box-shadow: none;
      border-radius: 0;
      padding-right: 0;
      padding-bottom: 10px;
      margin: 30px 0 -35px (-@left-column-width - @padding);
      width: auto;

      > .legend {
        margin-bottom: -5px;
        margin-left: 10px;
        margin-top: 0;
        position: static;
      }

      .control-group {
        background: transparent;
        display: block;
        width: 100%;

        &.form-row {
          padding: 0;
        }

        > div {
          display: block;
        }
      }

      .control-label {
        display: none;
      }

      .controls {
        display: block;
        margin-left: 0;
        border: 0;
        padding: 0;
        overflow: auto;
        background: transparent;
        overflow: visible;
      }

      .plugin-select-holder {
        padding-right: 0;

        select {
          height: 26px;
          padding: 2px;
          width: 157px;
          vertical-align: text-bottom;
        }

        .add-plugin, .copy-plugins {
          .bs-icon;
          padding: 2px;
          margin-left: 10px;
          .hide-text;
        }

        .copy-plugins {
          background-position: -240px -143px;
        }
      }

      .control-group:first-child .controls, .control-group:first-of-type .controls {
        padding: 0;
      }

      &:before {
        content: '';
        display: block;
        height: 10px;
        margin-bottom: 5px;
        background: #dfe1e4;
        border-left: 200px solid #dfe1e4;
      }
    }
  }

  .plugin-holder-separator {
    display: none;

    &:last-of-type {
      display: block;
      height: 10px;
      border: 0;
      background: #dfe1e4;
      border-left: 200px solid #dfe1e4;
      margin: 35px 0 40px (-@left-column-width - @padding);
    }
  }
}

.plugin-editor {
  position: relative;
  margin-left: (@left-column-width + 1px);

  iframe {
    margin: -25px 0 -10px;
    visibility: hidden;
  }

  & > p {
    margin: 0 0 0 @padding;
    .color-grey;
    .white-shadow;
    //        font-style: italic;
  }
}

.plugin-list-holder {
  width: @left-column-width;
}

ul.plugin-list {
  border-top: 1px solid @border-color-light;
  /* Reset */

  li, li.active, li:hover {
    background: transparent; //        border: 0;
    margin-right: -1px;
  }

  li {
    margin-left: 2px;
    position: relative;
    z-index: 1;
    .vertical-gradient(#fff, #f9f9f9);
    .border-radius(@border-radius);
    border: 1px solid @border-color;
    margin-bottom: -1px;
    .white-shadow;
    .white-inset;

    &:hover {
      background: white;
      border-color: #ccc;
      color: @text-color;
      z-index: 2;

      .delete {
        display: block;
      }

      span.text {
        color: #666;
        width: (@left-column-width - 53px);
      }
    }

    &.active, &.active:hover {
      box-shadow: none;
      z-index: 3;
      text-shadow: none;
      .blue-gradient;
      border-color: #6BA4BA;

      .text {
        color: #ffffff;
      }

      .descr {
        color: #c3dee8;
      }
    }

    .text {
      color: #666;
      width: (@left-column-width - 30px);
      white-space: nowrap;

      strong {
        display: block;
        float: left;
        min-width: 50px;
      }
    }

    .descr {
      color: #aaa;
    }

    .delete {
      .bs-icon;
      opacity: .2;
      padding: 2px;
      margin: 7px 0 0 6px;
      display: none;
    }

    .delete, .delete:hover, &:hover span.delete {
      background-position: -312px 0;
    }

    .drag {
      background: transparent;
      cursor: hand;
      cursor: grab;
      cursor: -moz-grab;
      cursor: -webkit-grab;

      &:hover {
      }

      &:active {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
      }
    }

    &:hover span.drag, &.active:hover span.drag {
      background: url('../img/drag-handle.png') center center no-repeat;
    }

    /*.drag {
        .bs-icon;
        padding: 2px;
        margin-top: 8px;
    }
    .drag, .drag:hover, &:hover span.drag {
        background-position: 0 -48px;
    }*/
  }
}

/* Popup related */
body.popup {
  height: auto;

  .suit-column {
    float: none;
    position: inherit;
  }
}

/* Iframe related styling */
body.plugin-change-form {
  #suit-center {
    padding-top: 1px;
    padding-right: 1px;
  }

  .plugin-submit-row {
    display: block;
    margin: 10px 0 0 200px;

    .btn {
      padding-left: 20px;
      padding-right: 20px;
    }

    .btn-info {
      padding-left: 30px;
      padding-right: 30px;
    }
  }

  .plugin-preview {
    display: inline-block;
    // Hide preview box
    display: none;
    .grey-box-shadow;
    background: @bgcolor-light;
    padding: 5px;
    .border-radius(@border-radius);
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 5px;

    img {
      max-width: 100px;
      max-height: 100px;
    }
  }
}

.control-group {
  &.form-row {
    padding: 0;
  }

  .control-label label {
    width: auto;
    float: none;
    text-align: right;
    padding-right: 0;
  }
}

/* Specific plugin fields */
#text_form {
  fieldset {
    box-shadow: none;
  }

  .control-group {
    .border-radius(0);
    width: 100%;
    display: block;

    > div {
      display: block;
    }

    .control-label {
      display: none;
      width: 0;
    }

    .controls {
      display: block;
      margin: 0;
      padding: 0;
      border: 0;
      width: 100%;
      .border-radius(@border-radius);

      .html-widget {
        display: inline-block;
        margin: 10px;
      }

    }
  }
}

#suit-loading-icon {
  display: none;
  width: 16px;
  height: 16px;
  background-image: url("../img/ajax-loader.gif");
}
